<form class="application-form" [formGroup]="applicationForm" #formElement>
  <div class="application-name">
    <label class="application-name__label" for="applicationName"
      >Application name</label
    >
    <input
      class="hydro-input application-name__input"
      type="text"
      formControlName="applicationName"
      id="applicationName"
      hsAutofocused
    />
    <ng-container
      *ngIf="
        applicationForm.get('applicationName').dirty &&
          applicationForm.get('applicationName').errors;
        let errors
      "
    >
      <ul class="error__list">
        <li class="error__item" *ngFor="let error of errors | iterateAsArray">
          {{ errors[error] }}
        </li>
      </ul>
    </ng-container>
  </div>
  <hs-kafka-form
    class="application__kafka"
    formArrayName="kafkaStreaming"
    [kafkaFormArray]="kafkaFormArray"
  >
  </hs-kafka-form>
  <div formArrayName="stages">
    <div
      *ngFor="
        let stage of applicationStagesFormArray.controls;
        index as stageIdx
      "
      [formGroup]="stage"
      class="stage"
    >
      <div class="stage__header">
        <span class="stage__name">Stage_{{ stageIdx }}</span>
        <span
          class="stage__remove"
          (click)="removeStage(stageIdx)"
          *ngIf="showRemoveStageButton()"
        >
          <hydro-icon
            type="icon-remove"
            class="icon"
            (click)="removeStage(stageIdx)"
          >
            remove
          </hydro-icon>
        </span>
      </div>
      <ng-container *ngIf="stage.get('modelVariants'); let modelVariants">
        <div formArrayName="modelVariants" class="services__list">
          <div
            *ngFor="
              let modelVariant of modelVariants.controls;
              index as modelVariantIdx;
              last as isLast
            "
          >
            <div
              class="services__item"
              [ngClass]="{ 'services__item--isLast': isLast }"
            >
              <hs-model-variant-form
                [group]="modelVariant"
                [index]="modelVariantIdx"
                [showRemoveIcon]="showRemoveModelVariantIcon(stage)"
                (delete)="onModelVariantDelete(stage, $event)"
              ></hs-model-variant-form>
            </div>
          </div>
        </div>
        <button
          hs-button
          kind="flat"
          color="primary"
          *ngIf="!stage.get('modelVariants').errors"
          (click)="addModelVariantToStage(stage)"
          class="button button--flat stage__add-model-variant-button"
        >
          add model variant
        </button>
        <ng-container *ngIf="stage.get('modelVariants').errors; let errors">
          <div
            class="error-container"
            *ngFor="let error of errors | iterateAsArray"
          >
            {{ errors[error] }}
          </div>
        </ng-container>
      </ng-container>
    </div>
  </div>
  <button
    hs-button
    kind="stroked"
    (click)="addStageControl()"
    class="add-stage-button"
  >
    add stage
  </button>
</form>
